<!--
 * @Description: DOM
 * @Author: rendc
 * @Date: 2022-09-05 14:28:52
 * @LastEditors: rendc
 * @LastEditTime: 2022-09-06 09:24:18
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
</head>

<body>
  <div id="app">
    <div id="div1" class="myDiv">div1</div>
    <input id="name" type="text">
    <div id="div2" class="myDiv" onclick="clickDiv2()">div2</div>
    <p>段落1</p>
    <p>段落2</p>
    <div id="div3"></div>
  </div>
</body>
<script>
  function clickDiv2() {
    console.log('🤡 CC - clickDiv2 - clickDiv2', )
  }
  // 通过id查找html元素
  var div1 = document.getElementById("div1");
  var div2 = document.getElementById("div2");
  // console.log('🤡 CC - div1', div1)
  // 通过class查找html元素 []
  var myDivs = document.getElementsByClassName("myDiv");
  // console.log('🤡 CC - myDivs', myDivs)
  // 通过tag查找html元素 []
  var p = document.getElementsByTagName("p");
  // console.log('🤡 CC - p', p)
  // 改变元素的内容
  div1.innerHTML = "hello,world";
  // 找到input元素
  let inputName = document.getElementById("name");
  // console.log('🤡 CC - inputName', inputName)
  inputName.value = "张三";
  // img src alt
  // 改变元素的属性
  // console.log('🤡 CC - div2', div2)
  div2.classList = "myDiv2";
  // 改变元素的样式
  div2.style.color = "black";
  // 给元素添加事件 方式1 会覆盖之前的事件
  div2.onclick = function () {
    console.log("div2被点击了");
  }
  // 给元素添加事件 方式2 不会覆盖之前的事件
  div2.addEventListener(
    "click", // dom事件去掉on
    function () {
      console.log("div2被点击了");
    }
  )
  // 创建元素
  var p = document.createElement("p");
  var note = document.createTextNode("hello,word")
  // 添加元素 把文本内容添加到p标签内部
  p.appendChild(note);
  console.log('🤡 CC - p', p)
  var div3 = document.getElementById("div3")
  // 添加元素
  div3.appendChild(p);
  // 删除元素 (父节点调用函数删除子节点)
  div3.removeChild(p);
</script>
<style>
  .myDiv {
    color: aqua;
    font-size: 20px;
  }

  .myDiv2 {
    color: red;
  }
</style>

</html>